<template>
	<!-- 我的收藏 -->
	<view class="page">
		<u-swipe-action>
			<c-scroll-list ref="list" :api="api" @load="load">
				<view v-for="(v,i) in list" :key="i">
					<u-swipe-action-item :options="swipeOp" @click.stop="cancelCollection(v.courseId)">
						<view class="t_list"
							@click.stop="$fn.jumpPage('/pages/home/pages/courseDetails?courseId='+v.courseId)">
							<view class="t_list_l">
								<view class="t_name">{{v.title}}</view>
								<view class="look_num">
									<u-icon name="eye" color="#999999" size="32rpx"></u-icon>
									{{v.viewNum>10000?(v.viewNum/10000).toFixed(1)+'w':v.viewNum}}
								</view>
							</view>
							<image class="t_img" :src="vuex_imgUrl+v.mainImages" mode=""></image>
						</view>
					</u-swipe-action-item>
				</view>
			</c-scroll-list>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		name: "myCollection",
		data() {
			return {
				swipeOp: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#FC3E3E',
						fontSize: '24rpx',
						width: '80rpx',
						padding: '0',
						writingMode: 'vertical-lr',

					}
				}],
				api: this.$api.getCollectionList,
				list: []
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			//取消收藏
			cancelCollection(courseId) {
				console.log(courseId, '取消收藏');
				this.$api.collection({
					courseId
				}).then(res => {
					console.log('取消收藏', res);
					this.$refs.list.initList(true)
				})
			},
			// 获取收藏列表
			load(res) {
				console.log('获取收藏列表', res);
				this.list = res.list
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		box-sizing: border-box;

		.t_list {
			padding: 28rpx 0;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			align-items: center;
			gap: 34rpx;

			.t_list_l {
				flex: 1;
				height: 132rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.t_name {
					width: 100%;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.look_num {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.t_img {
				flex: none;
				width: 176rpx;
				height: 132rpx;
				border-radius: 4rpx;
			}

		}
	}

	/deep/.u-line-1 {
		display: block !important;
	}
</style>